<template>
  <div class="work-place">
    <zh-row :gutter="[16, 16]">
      <zh-col :xs="24" :sm="24" :md="24" :lg="12" :xl="16" :xxl="16">
        <zh-row :gutter="[16, 16]">
          <zh-col :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
            <a-card
              class="card-radius"
              :bordered="false"
              :bodyStyle="bodyStyle_pd0"
            >
              <div class="card-mar">
                <div class="title-size">校核总数</div>
                <h2 class="title-size2">{{ this.allInfo.checkTotal }}</h2>
              </div>
            </a-card>
          </zh-col>
          <zh-col :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
            <a-card
              class="card-radius"
              :bordered="false"
              :bodyStyle="bodyStyle_pd0"
            >
              <div class="card-mar">
                <div class="title-size">已完成数</div>
                <h2 class="title-size2">{{ this.allInfo.checkedTotal }}</h2>
              </div>
            </a-card>
          </zh-col>

          <zh-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :xxl="8">
            <a-card
              class="card-radius"
              :bordered="false"
              :bodyStyle="bodyStyle_pd0"
            >
              <div class="card-mar">
                <div class="title-size">待完成</div>
                <h2 class="title-size5">{{ this.allInfo.unCheckTotal }}</h2>
                <div>
                  <span class="title-size3">当前完成进度</span>
                  <span class="title-size4"
                    >{{ this.allInfo.completionRate }}%</span
                  >
                  <a-progress
                    :percent="this.allInfo.completionRate"
                    :show-info="false"
                    strokeColor="#13C2C2"
                  />
                </div>
              </div>
            </a-card>
          </zh-col>
          <zh-col :span="24">
            <a-card
              class="card-radius"
              :bordered="false"
              :bodyStyle="bodyStyle_pd0"
            >
              <a-row :gutter="[16, 16]">
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                  <div class="icon-div border-b1">
                    <span class="icon-div5"></span>
                    <span class="title-size6"> 校核任务列表</span>
                  </div>
                  <div class="char-div">
                    <a-dropdown style="margin: 20px">
                      <template #overlay>
                        <a-menu @click="handleTaskClick">
                          <a-menu-item key="1">校核任务</a-menu-item>
                          <a-menu-item key="2">审核任务</a-menu-item>
                          <a-menu-item key="3">处置任务</a-menu-item>
                        </a-menu>
                      </template>
                      <a-button
                        type="primary"
                        size="large"
                        style="width: 180px"
                      >
                        全部
                        <a-icon type="caret-down-o" />
                      </a-button>
                    </a-dropdown>

                    <a-dropdown style="margin: 20px">
                      <template #overlay>
                        <a-menu @click="handleOrderClick">
                          <a-menu-item key="1">接收时间近到远</a-menu-item>
                          <a-menu-item key="2">接收时间远到近</a-menu-item>
                          <a-menu-item key="3">截止时间近到远</a-menu-item>
                          <a-menu-item key="4">截止时间远到近</a-menu-item>
                        </a-menu>
                      </template>
                      <a-button
                        type="primary"
                        size="large"
                        style="width: 180px"
                      >
                        排序
                        <a-icon type="caret-down-o" />
                      </a-button>
                    </a-dropdown>

                    <span
                      style="
                        font-size: large;
                        font-weight: bold;
                        margin-left: 25px;
                      "
                      >已逾期:<span style="color: red">{{
                        this.allInfo.overdueTotal
                      }}</span></span
                    >

                    <a-input-search
                      style="width: 250px; margin: 20px 0px 0px 20px"
                      v-model="keywords"
                      placeholder="请输入校核任务名称"
                      enter-button="搜索"
                      size="large"
                      @search="onSearchTask"
                    />
                    <a-list class="tab-pane" :pagination="pagination">
                      <div
                        style="margin: 15px"
                        v-if="taskList.length > 0"
                        ref="listDiv"
                        :style="'height:' + listDivHeight"
                      >
                        <a-list-item
                          v-for="(item, index) in taskList"
                          :key="index"
                          style="padding: 10px"
                        >
                          <a-tag
                            size="large"
                            v-if="item.status === '1'"
                            color="#87d068"
                            >校核</a-tag
                          >
                          <a-tag v-if="item.status === '2'" color="#f50"
                            >审核</a-tag
                          >
                          <a-tag v-if="item.status === '3'" color="#2db7f5"
                            >处置</a-tag
                          >
                          <a-list-item-meta
                            :title="item.c0302 + '校核任务待完成'"
                            :description="
                              '任务数量:' +
                              item.total +
                              '          ' +
                              '截止时间：' +
                              item.c0305
                            "
                          >
                          </a-list-item-meta>
                          <a-button @click="toTask(item)">去完成</a-button>
                        </a-list-item>
                      </div>
                      <div v-else style="height: 200px; margin-top: 150px">
                        <a-empty />
                      </div>
                    </a-list>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </zh-col>
        </zh-row>
      </zh-col>
      <zh-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="8">
        <zh-row :gutter="[0, 16]">
          <zh-col :span="24">
            <a-card
              class="card-radius"
              :bordered="false"
              :bodyStyle="bodyStyle_pd0"
              style="height: 825px"
            >
              <div class="icon-div2 border-b1">
                <img
                  width="15px"
                  height="16px"
                  class="mar-t3-r7"
                  src="@/assets/workPlace/icon10.svg"
                />
                <span class="title-size6"> 最新消息</span>
              </div>
              <span
                style="
                  font-size: large;
                  font-weight: bold;
                  margin-left: 25px;
                  white-space: nowrap;
                "
                @click="queryMessage(null, { status: 'read' })"
                >已读:<span style="color: blue">{{ readMsgTotal }}</span></span
              >
              <span
                style="
                  font-size: large;
                  font-weight: bold;
                  margin-left: 25px;
                  white-space: nowrap;
                "
                @click="queryMessage(null, { status: 'send' })"
                >未读:<span style="color: red">{{
                  noReadMessageCnt
                }}</span></span
              >
              <br />
              <a-input-search
                style="width: 250px; margin: 20px"
                v-model="keywords"
                placeholder="请输入消息内容"
                enter-button="搜索"
                size="large"
                @search="onSearchMsg"
              />
              <a-list class="tab-pane" :pagination="pagination1">
                <div
                  v-if="messageList.length > 0"
                  style="margin: 15px"
                  ref="listDiv1"
                  :style="'height:' + listDivHeight1"
                >
                  <a-list-item
                    v-for="(item, index) in messageList"
                    :key="index"
                    @click="readMessage(item)"
                    style="padding: 10px"
                  >
                    <a-badge v-if="item.status === '1'" dot>
                      <a-icon type="message-o" />
                    </a-badge>
                    <a-badge v-if="item.status === '2'" :count="0" dot>
                      <a-icon type="message-o" />
                    </a-badge>
                    &nbsp;&nbsp;&nbsp;
                    <a-list-item-meta
                      :title="item.title"
                      :description="item.description"
                    >
                    </a-list-item-meta>
                  </a-list-item>
                </div>
                <div v-else style="height: 200px; margin-top: 150px">
                  <a-empty />
                </div>
              </a-list>
              <a-modal
                :title="taskDetails.title"
                v-model="taskVisible"
                centered
                style="top: 20px"
                width="85%"
                destroyOnClose
              >
                <div>
                  {{ taskDetails.description }}
                </div>
              </a-modal>
              <a-modal
                :title="newDetails.title"
                :visible="showNewDetailsFlag"
                :confirm-loading="false"
                @ok="closeNewDetails"
                @cancel="closeNewDetails"
                oncancel="false"
                :footer="null"
              >
                <div style="text-indent: 2em; padding: 0px 40px 0 40px">
                  {{ newDetails.messageContent }}
                </div>
                <div style="text-align: right; padding: 40px">
                  <div>{{ newDetails.sendName }}</div>
                  <div>{{ newDetails.sendTime }}</div>
                </div>
              </a-modal>
            </a-card>
          </zh-col>
        </zh-row>
      </zh-col>
    </zh-row>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
import api from "@/services/system/api";
import {
  getWorkPlaceListData,
  getTaskDetails,
  getWorkPlaceTotalData,
} from "@/services/system/whdngxlApi";
import { isEmptyStr } from "@/utils/util";
export default {
  name: "IndexDemo",
  components: {},
  data() {
    return {
      taskVisible: false,
      listDivHeight: "auto",
      listDivHeight1: "auto",
      msgVisible: false,
      taskDetails: {
        title: "",
        description: "",
      },
      bodyStyle_pd0: {
        padding: "0",
      },
      bodyStyle_pd_tb10: {
        padding: "10px 0px",
      },
      bodyStyle_pd_t10: { padding: "10px 0px 0px" },
      //审核页面的打开和关闭
      auditVisible: false,
      queryParam: {}, //我的代办查询条件
      pendTableData: [],
      //审核相关信息
      comData: null,
      allInfo: {
        checkTotal: 0, //校核总数
        checkedTotal: 0, //已校核数
        unCheckTotal: 0, //未校核数
        completionRate: 0, //完成率
        overdueTotal: 0, //逾期数
      },
      spinning: false,
      messageList: [],
      keywords: "",
      taskList: [],
      pagination: {
        pageSize: 5,
        current: 1,
        // simple:true,//启动简单分页 无法切换每页数量
        showLessItems: true,
        showSizeChanger: false,
        size: "small",
        pageSizeOptions: ["5"],
        onChange: (page) => {
          this.setListDivHeight(page);
          this.queryTask(page, null);
        },
        onShowSizeChange: (current, size) => {
          this.showSizeChange(current, size);
        },
      },
      pagination1: {
        pageSize: 5,
        current: 1,
        // simple:true,//启动简单分页 无法切换每页数量
        showLessItems: true,
        showSizeChanger: true,
        size: "small",
        pageSizeOptions: ["5"],
        onChange: (page) => {
          this.setListDivHeight1(page);
          this.queryMessage(page, null);
        },
        onShowSizeChange: (current, size) => {
          this.showSizeChange1(current, size);
        },
      },
      noReadMessageCnt: "",
      readMsgTotal: "",
      showNewDetailsFlag: false,
      newDetails: {},
    };
  },
  created() {},
  activated() {
    this.getNoReadMessageCnt();
    this.getWorkPlaceTotalData();
  },
  mounted() {
    this.$nextTick(() => {
      this.queryTask();
      this.getNoReadMessageCnt();
      this.queryMessage();
    });
  },
  methods: {
    queryMessage(page, searchParams) {
      let param = {};
      this.messageList = [];
      param.pageSize = this.pagination1.pageSize;
      if (page) {
        param.pageNum = page;
        this.pagination1.current = page;
      } else {
        param.pageNum = this.pagination1.current;
      }
      if (searchParams) {
        if (!isEmptyStr(searchParams.title)) {
          param.title = searchParams.title;
        }
        if (!isEmptyStr(searchParams.status)) {
          param.status = searchParams.status;
        }
      }
      this.$http
        .post(api.queryMessageList, param)
        .then((res) => {
          let messageList = res.result.list;
          if (messageList && messageList.length) {
            for (let index in messageList) {
              let messageObj = messageList[index];
              //init send
              let status = "";
              if (messageObj.status == "read" || messageObj.status == "reply") {
                status = "2";
              } else {
                status = "1";
              }
              let des = messageObj.sendTime;
              messageObj.description = des;
              messageObj.status = status;
              messageList[index] = messageObj;
            }
            this.messageList = messageList;
            this.pagination1.total = res.result.total;
          }
          this.loadding = false;
        })
        .catch(() => {
          this.loadding = false;
        });
    },
    showSizeChange(current, size) {
      this.listDivHeight = "auto";
      this.pagination.pageSize = size;
      this.pagination.current = current;
      this.queryTask();
    },
    showSizeChange1(current, size) {
      this.listDivHeight1 = "auto";
      this.pagination1.pageSize = size;
      this.pagination1.current = current;
      this.queryMessage();
    },
    lookTask(item) {
      this.taskVisible = true;
      this.taskDetails = item;
    },
    readMessage(item) {
      if (item.readTime) {
        this.showNewDetails(item);
      } else {
        let params = {};
        params.userMessageId = item.userMessageId;
        this.$http
          .post(api.readUserMessage, params)
          .then((res) => {
            this.showNewDetails(item);
            this.getNoReadMessageCnt();
            this.queryMessage();
          })
          .catch((error) => {
            this.showNewDetails(item);
          });
      }
    },
    showNewDetails(item) {
      this.newDetails = item;
      this.showNewDetailsFlag = true;
    },
    closeNewDetails() {
      this.showNewDetailsFlag = false;
      this.newDetails = {};
    },
    onSearchTask(value) {
      const params = {};
      params.c0302 = value;
      this.queryTask(null, params);
    },
    onSearchMsg(value) {
      const params = {};
      params.title = value;
      this.queryMessage(null, params);
    },
    toTask(value) {
      if (value.c0303 == "1") {
        this.$router.push({
          name: "URResourcesCheck",
          params: {
            c0302: value.c0302,
            c0302: value.c0303,
          },
        });
      } else if (value.c0303 == "2") {
        this.$router.push({
          name: "TreeResourcesCheck",
          params: {
            c0302: value.c0302,
            c0302: value.c0303,
          },
        });
      } else {
        this.$router.push({
          name: "RoadResourcesCheck",
          params: {
            c0302: value.c0302,
            c0302: value.c0303,
          },
        });
      }
    },
    //查询校核任务
    queryTask(page, obj) {
      this.$loading.show();
      this.taskList = [];
      const param = {};
      param.pageSize = this.pagination.pageSize;
      if (page) {
        param.pageNum = page;
        this.pagination.current = page;
      } else {
        param.pageNum = this.pagination.current;
      }
      if (obj) {
        if (!isEmptyStr(obj.c0302)) {
          param.c0302 = obj.c0302;
        }
        if (!isEmptyStr(obj.orderType)) {
          param.orderType = obj.orderType;
        }
      }
      param.c0103 = "0"; //未校核
      this.$http
        .post(getWorkPlaceListData, param)
        .then((res) => {
          if (res.result.list.length > 0) {
            //对所有校核添加类型属性
            res.result.list.forEach((item, index) => {
              this.taskList.push(Object.assign({}, item, { status: "1" }));
            });
            this.pagination.total = res.result.list.length;
            this.pagination.pages = res.result.pages;
            this.$loading.hide();
          } else {
            this.taskList = [];
            this.$loading.hide();
          }
        })
        .catch((error) => {
          console.log(JSON.stringify(error));
          this.$loading.hide();
        });
    },
    taskTotalQuery(value) {
      const params = {};
      params.c0301 = value;
      return new Promise((resolve, reject) => {
        this.$http.post(getTaskDetails, params).then((res) => {
          resolve(res.result.total);
        });
      });
    },
    //选择业务类型
    handleTaskClick(obj) {
      console.log(obj.key);
      if (obj.key === "1") {
        this.queryTask();
      } else if (obj.key === "2") {
        this.taskList = [];
      } else if (obj.key === "3") {
        this.taskList = [];
      }
    },
    //选择排序
    handleOrderClick(obj) {
      const params = {};
      if (obj.key === "1") {
        this.taskList = [];
      } else if (obj.key === "2") {
        this.taskList = [];
      } else if (obj.key === "3") {
        params.orderType = obj.key;
        this.queryTask(null, params);
      } else if (obj.key === "4") {
        params.orderType = obj.key;
        this.queryTask(null, params);
      }
    },
    getNoReadMessageCnt() {
      let param = {};
      this.$http
        .post(api.getNoReadMessageCnt, param)
        .then((res) => {
          this.noReadMessageCnt = res.result;
        })
        .then(() => {
          this.$http.post(api.queryMessageList, param).then((res1) => {
            this.readMsgTotal = res1.result.total - this.noReadMessageCnt;
          });
        })
        .catch(() => {});
    },
    setListDivHeight() {
      let total = this.pagination.total;
      let pageSize = this.pagination.pageSize;
      let pages = 0;
      if (total && pageSize) {
        pages = Math.ceil(total / pageSize);
      }
      if (pages <= 1) {
        //如果总页数小于等于1则不处理
        this.listDivHeight = "auto";
        return;
      }
      if (this.taskList.length != pageSize) {
        //不满的页数 不设置高度
        return;
      }
      let divheight = 0;
      try {
        divheight = this.$refs.listDiv.offsetHeight;
      } catch (e) {}
      if (divheight && this.listDivHeight == "auto") {
        this.listDivHeight = divheight + "px";
      } else if (divheight && this.listDivHeight < divheight) {
        this.listDivHeight = divheight + "px";
      }
    },
    setListDivHeight1() {
      let total = this.pagination1.total;
      let pageSize = this.pagination1.pageSize;
      let pages = 0;
      if (total && pageSize) {
        pages = Math.ceil(total / pageSize);
      }
      if (pages <= 1) {
        //如果总页数小于等于1则不处理
        this.listDivHeight1 = "auto";
        return;
      }
      if (this.messageList.length != pageSize) {
        //不满的页数 不设置高度
        return;
      }
      let divheight = 0;
      try {
        divheight = this.$refs.listDiv1.offsetHeight;
      } catch (e) {}
      if (divheight && this.listDivHeight1 == "auto") {
        this.listDivHeight1 = divheight + "px";
      } else if (divheight && this.listDivHeight1 < divheight) {
        this.listDivHeight1 = divheight + "px";
      }
    },
    getWorkPlaceTotalData() {
      let param = {};
      this.$http
        .post(getWorkPlaceTotalData, param)
        .then((res) => {
          this.allInfo = res.result;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.work-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px 0;
  .left-wrap {
    flex: 0 0 auto;
    width: 65%;
  }
  .right-wrap {
    flex: 0 0 auto;
    width: 32%;
  }
}
.mar-lauto {
  margin-left: auto;
  cursor: pointer;
}

.mar-tb16 {
  margin: 16px 0;
}

.mar-t14 {
  margin-top: 14px;
}

.mar-t16 {
  margin-top: 16px;
}

.mar-t3-r7 {
  margin-top: 3px;
  margin-right: 7px;
}

.pd-r16 {
  padding-right: 16px;
}

.pd-r12 {
  padding-right: 12px;
}

.pd-8 {
  padding: 8px;
}

.pd-tb14-lr16 {
  padding: 14px 16px;
}

.border-t1 {
  border-top: 1px #e8e8e8 solid;
}

.border-b1 {
  border-bottom: 1px #e8e8e8 solid;
}

.font-size14-1 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}

.font-size14-2 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.card-radius {
  width: 100%;
  /* border-radius: 8px;*/
}

.icon-div {
  padding: 16px 16px 10px;
  display: flex;
  align-items: center;
}

.icon-div2 {
  padding: 11px 16px 10px;
  display: flex;
  align-items: center;
}

.icon-div3 {
  width: 110px;
  height: 93px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin: 0 auto;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.icon-div3:hover {
  border: 1px solid #4e9bfa;
  color: #3b8af3;
  font-weight: 500;
}

.icon-div4 {
  text-align: center;
  width: 100%;
  height: 43px;
  background-size: cover;
  padding-top: 16px;
}

.icon-div5 {
  width: 1px;
  margin-top: 4px;
  height: 15px;
  border-left: 2px solid #005dd5;
  border-right: 1px solid #005dd5;
  margin-right: 10px;
}

.common-fun {
  text-align: center;
  padding: 24px 0 21px;
}

.common-fun2 {
  text-align: center;
  padding: 19px 0 18px;
}

.fl-ri {
  float: right;
}

.char-div {
  width: 100%;
  height: 600px;
}

.char-div2 {
  width: 100%;
  height: 203px;
}

.title-size {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.title-size2 {
  height: 38px;
  line-height: 38px;
  font-size: 30px;
  font-weight: 400;
  margin-top: 4px;
  margin-bottom: 20px;
}

.title-size3 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-right: 8px;
}

.title-size4 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.title-size5 {
  height: 38px;
  line-height: 38px;
  font-size: 30px;
  font-weight: 400;
  margin-top: 4px;
  margin-bottom: 9px;
}

.title-size6 {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
}

.title-size7 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.card-mar {
  margin: 20px 24px 16px;
}

.pd-t9 {
  padding-top: 9px;
}
</style>
